<template>
  <view class="userInfo">
    <view style="padding: 0 30rpx;box-sizing: border-box;">
      <view class="userInfo-item">
        <view class="label">头像</view>
        <view class="userInfo-item-fr">
          <UploadImg :width="100" :height="100" keyName="avatar" @getUrl="getUrl"
            :uploadImg="params.avatar?params.avatar:''" />
          <image class="toRight" src="/static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="userInfo-item">
        <view class="label">昵称</view>
        <view class="userInfo-item-fr">
          <input type="text" v-model="params.real_name" class="userInfo-item-fr-ipt" placeholder="请输入"
            placeholder-class="styles" />
          <image class="toRight" src="/static/images/arrow.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="onSave">保存</view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        params: {
          avatar: "/static/images/goodName.png",
          real_name: "小红",
        }
      }
    },
    onShow() {
      this.params = uni.getStorageSync("userInfo");
      console.log("params123", this.params);
    },
    methods: {
      toBindPhone() {
        uni.navigateTo({
          url: "/pages/subpack/mine/bindPhone"
        })
      },
      open() {
        this.$refs.datetimePicker.open();
      },
      confirm(e) {
        console.log('选择生日', e);
        this.params.birthday = uni.$uv.timeFormat(e.value, "yyyy-mm-dd");
      },
      openPicker() {
        this.$refs.picker.open();
      },
      confirm2(e) {
        console.log('选择性别', e);
        this.params.gender = e.value[0].value;
        this.genderName = e.value[0].name;
      },
      async onSave() {
        console.log("params456", this.params);
        await reqApi.setUserInfo(this.params);
        let res = await reqApi.userInfo({});
        uni.setStorageSync("userInfo", res.data);
        uni.showToast({
          title: "保存成功",
          icon: 'none',
          mask: true,
          duration: 1500,
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
      },
      getUrl(e) {
        console.log("子组件传过来的", e);
        const {
          keyName,
          value
        } = e;
        this.params[keyName] = value;
      }
    }
  }
</script>
<style>
  .styles {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #666;
  }
</style>
<style lang="scss" scoped>
  .footer{
    padding: 50rpx 30rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .btn{
      width: 100%;
      height: 88rpx;
      background: #F86F03;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }
  .orangeColor {
    color: #FF7B02;
  }

  .userInfo {
    width: 100vw;
    height: 100vh;
    background: #fff;

    .userInfo-item {
      display: flex;
      justify-content: space-between;
      height: 128rpx;
      align-items: center;
      border-bottom: 2rpx solid #eee;
      padding: 0 30rpx;
      box-sizing: border-box;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      .userInfo-item-fr {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .userInfo-item-fr-ipt {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222 !important;
          flex: 1;
          text-align: right;
        }



        .toRight {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
</style>